<template>
    <div id="app">
        <router-link to="/Home" tag="button">首页</router-link>
        <router-link :to="'/User/'+uid" tag="button">用户</router-link>
        <router-link :to="'/About/'+about" tag="button">关于</router-link>
        <router-link :to="{path:'/Profile',query:{name:'张三',age:'15',height:'1.55'}}" tag="button">档案</router-link>
<!--        排除Profile组件。-->
        <keep-alive exclude="Profile">
            <router-view></router-view>
        </keep-alive>
        <hr>
<!--        <h1>通过代码来跳转</h1>-->
<!--        <button @click="homeClick">首页</button>-->
<!--        <button @click="userClick">用户</button>-->
<!--        <button @click="aboutClick">关于</button>-->
<!--        <button @click="profileClick">档案</button>-->
<!--        -->
<!--        <router-view></router-view>-->
    </div>
</template>

<script>

    export default {
        name: 'App',
        data() {
            return {
                home: '首页',
                uid: 'zhangsan',
                about: 'guanyu'
            }
        },
        methods: {

            homeClick() {
                this.$router.push('/Home')
                this.$test()
                console.log(this.$name);
            },

            userClick() {
                this.$router.push('/User/'+this.uid)
            },

            aboutClick() {
                this.$router.push('/About/'+this.about)
            },

            profileClick() {
                this.$router.push({
                    path:'/Profile',
                    query:{
                        name:"菲姐",
                        age:'24',
                        height:'164'
                    }
                })
            },

        },
        components: {}
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .active {
        color: #ff0000;
    }
</style>
